
/* 定义动画 */
@keyframes showCard {
    0% {opacity: 0; transform: rotateY(180deg);}
    50% {width: 300px; height: 150; opacity: 0.4;}
    100% {transform: rotateY(360deg);}
  }

#btngroup {
    display: flex;
    justify-content: space-around;
}

.equipImg {
    width: 50px;
    height: 50px;
    margin: 10px;
}

.equip_data{
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #234;
    color: goldenrod;
    border: gray 1px solid;
    margin: 10px;
    align-items: center;
    cursor: pointer;

  
}
  /* 超出文本.. */
.equipName{
    width: 90px;
   text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden; 
}
.divShadow{
    position: absolute;
    width: 100%;
    height: 1000px;
    background: gray;
    opacity: 0.8;
    z-index: 10;
    float: auto;
}
body{
    position: relative;
}

/* 卡片翻转效果 */
.card{
    opacity: 1;
    position: absolute;
    justify-content: space-around;

    /* 常规属性 */
    width: 300px;
    height: 400px;
    z-index: 11;
    left:50%;
    margin-left: -150px;
    top: 25%;
    line-height: 20px;
 
    /* 设置动画 */
    animation: showCard 1.5s ease-out;

    /*边框*/
     border: solid 1px rgba(102, 146, 191, 0.68);
    /*边角弧度*/
    border-radius: 10px;
    /*阴影*/
    -moz-box-shadow:2px 2px 5px #333333; 
    -webkit-box-shadow:2px 2px 5px #333333; 
    box-shadow: 7px 15px 30px #285a63;
}
/* 控制显示（卡片and遮罩） */
.OutOrIn{
    display: none;
    
}
